'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import CATE from 'service/cate_service.jsx';
import FileUploader from 'page/component/file-upload/index.jsx';
import RichEditor   from 'page/component/rich-editor/index.jsx';
//引入依赖页面
import PageTitle from 'page/component/page-title/index.jsx';

//引入样式文件
import './index.scss';

const _comm    = new MMALL_COM();
const _cate = new CATE();
class ProductCategory extends React.Component{
    constructor(props){
        super(props);
        this.state={
            cateList:[],
            parentId:0,
            categoryName:''

        }
        //绑定this
    }
    componentDidMount(){
        this.getAllCate();
    }
    //两次路径不一致，强制刷新
    componentDidUpdate(prevProps){
    
    }
    //获取所有分类
    getAllCate(){
        _cate.getCateList().then(res=>{
            this.setState({
                cateList:res
            })
        },
        msg=>{
            _comm.errotTip(msg);
        })
    }
    //表单改事件
    onInputChange(e){
        let ele    = e.target;
        let inputValue = ele.value,
        inputName  = ele.name;
        this.setState({
            [inputName]:inputValue
        })
    }
    //提交页面
    onSubmit(e){
        e.preventDefault();
        console.log(this.state.categoryName);
        if(this.state.categoryName){
            let cate={
                parentId : this.state.parentId,
                categoryName  : this.state.categoryName
            }
            console.log(cate);
            _cate.addCategory(cate).then(res=>{
                _comm.successTip(res);
                window.location.href='#/product.category'
            },
            msg=>{
                _comm.errorTip(msg);
            })
        }
        else{
            _comm.errorTip('请输入新分类名称')
        }
    }
    //渲染页面
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle pageTitle={'品类管理'} >
                    <div className="page-header-right">
                        <Link className="btn btn-primary" to="/product.category/add"><i className="fa fa-plus fa-fw"></i>添加品类</Link>
                    </div>
                </PageTitle>
                <div className="row">
                    <div className="form-wrap col-lg-12">
                        <form className="form-horizontal" onSubmit={this.onSubmit.bind(this)}>
                            <div className="form-group">
                                <label className="col-md-2 control-label">所属品类</label>
                                <div className="col-md-10">
                                    <select className="form-control cate-select" name="parentId" onClick={this.onInputChange.bind(this)}>
                                        <option value="0">/所有</option>
                                        {
                                            this.state.cateList.map((cate,index)=>{
                                                return (
                                                    <option value={cate.id} key={index}>{'/所有/'+cate.name}</option>
                                                )
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="form-group">
                                <label htmlFor="category-name" className="col-md-2 control-label">品类名称</label>
                                <div className="col-md-3">
                                    <input type="text" className="form-control" id="category-name" name="categoryName" autoComplete="off" placeholder="请输入品类名称"
                                     onChange={this.onInputChange.bind(this)} />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-md-offset-2 col-md-10">
                                    <button type="submit" className="btn btn-xl btn-primary">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProductCategory;
